<template>
	<view>
		<view class="head-box">
			<view class="water-c">
				<view class="water-1"></view>
				<view class="water-2"></view>
				<view class="water-3"></view>
			</view>
			<view class="user-info u-flex">
				<view class="avatar">
					<image :src="info.avatar"></image>
				</view>
				<view class="info u-flex-1">
					<view class="u-line-1">昵称：{{info.nickname}}</view>
					<view class="u-line-1">电话：{{info.mobile}}</view>
				</view>
			</view>
		</view>
		<view class="data-count">
			<view class="u-flex item num1" @click="jump('/pages/agent/sell-house')">
				<image src="/pages/agent/static/icon/num1-icon.png"></image>
				<view class="tit">售　房</view>
				<view class="info">
					<view>
						<text>当月已上架：</text>
						<text class="num">{{info && info.sell_house.yes[0]}}</text>
						<text>/{{info && info.sell_house.yes[1]}}总</text>
					</view>
					<view>
						<text>当月未上架：</text>
						<text class="num">{{info && info.sell_house.no[0]}}</text>
						<text>/{{info && info.sell_house.no[1]}}总</text>
					</view>
				</view>
			</view>
			<view class="u-flex item num2" @click="jump('/pages/agent/renting-house')">
				<image src="/pages/agent/static/icon/num2-icon.png"></image>
				<view class="tit">租　房</view>
				<view class="info">
					<view>
						<text>当月已上架：</text>
						<text class="num">{{info && info.rent_house.yes[0]}}</text>
						<text>/{{info && info.rent_house.yes[1]}}总</text>
					</view>
					<view>
						<text>当月未上架：</text>
						<text class="num">{{info && info.rent_house.no[0]}}</text>
						<text>/{{info && info.rent_house.no[1]}}总</text>
					</view>
				</view>
			</view>
			<view class="u-flex item num1">
				<image src="/pages/agent/static/icon/num3-icon.png"></image>
				<view class="tit">可上架</view>
				<view class="info">
					<view>
						<text>当月可上架次数：</text>
						<text class="num">{{info.surplus_push_num}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="link-list">
			<view class="item u-flex" v-for="(item,index) in links" :key="index" hover-class="link-list-item-hover" @click="jumps(index)">
				<image :src="`/pages/agent/static/icon/icon${index + 1}.png`"></image>
				<view class="u-flex-1">{{item}}</view>
				<text class="iconfont icon-jiantouyou"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				links:['精选好房','带看记录','意向金合同','定金合同'],
				info:''
			}
		},
		methods:{
			getInfo(){
				this.$u.post('/api/agent/info').then(res=>{
					this.info = res
				})
			},
			jumps(i){
				let index = this.links[i]
				index === '精选好房' && this.jump('/pages/agent/housing?is_selected_switch=1')
				index === '会员服务' && this.jump('/pages/agent/vip-serve')
				index === '带看记录' && this.jump('/pages/agent/look-record')
				index === '意向金合同' && this.jump('/pages/agent/contract?type=1')
				index === '定金合同' && this.jump('/pages/agent/contract?type=2')
				index === '业务进度' && this.jump('/pages/agent/progress')
			}
		},
		created(){
			this.getInfo()
		}
	}
</script>

<style lang="scss">
	.head-box{height: 280rpx;background-color: $tc;position: relative;
		.user-info{position: relative;z-index: 1;padding: 60rpx 30rpx 0 66rpx;
			.avatar{width: 140rpx;height: 140rpx;
				image{display: block;width: 100%;height: 100%;border-radius: 50%;}
			}
			.info{
				margin-left: 40rpx;overflow: hidden;
				view{color: #fff;font-size: 32rpx;padding: 4rpx 0;word-break: break-all;}
			}
		}
	}
	// 上架数据统计
	.data-count{
		margin-top: -40rpx;position: relative;z-index: 1;padding: 0 30rpx 20rpx;
		.item{
				margin-top: 30rpx;border-radius: 40rpx;background-color: #fff;box-shadow: 0 4rpx 10rpx #ddd;height: 200rpx;position: relative;
				image{width: 120rpx;height: 113rpx;display: block;position: absolute;right: 10rpx;bottom: 20rpx;}
				.tit{padding: 0 36rpx;font-weight: bold;font-size: 40rpx;border-right: 2rpx solid #d3d3d3;margin-right: 50rpx;}
				.info{
					position: relative;
					view{color: #111;font-size: 30rpx;vertical-align: bottom;}
					.num{font-weight: bold;font-size: 40rpx;padding-left: 40rpx;}
				}
				&:first-child{margin-top: 0;}
				&.num1{
					.tit,.num{color: #f8603d;}
				}
				&.num2{
					.tit,.num{color: #107ef9;}
				}
		}
	}
	
	// 底部链接
	.link-list{
		.item{border-bottom: 2rpx solid #ececec;height: 110rpx;padding: 0 40rpx 0 50rpx;
			image{display: block;width: 70rpx;height: 70rpx;}
			view{font-size: 30rpx;font-weight: bold;color: #111;margin-left: 18rpx;}
			.iconfont{color: #888;font-size: 40rpx;}
			&:last-child{border-bottom: 0;}
		}
	}
	.link-list-item-hover{background-color: #f9f9f9;opacity: .9;}
	
	
	
	// 顶部动画
	
	.water-c {
		position: absolute;
		left: 0;
		bottom: 0px;
		height: 80px;
		width: 100%;
		overflow: hidden;
		opacity:0.3;
	}
	
	.water-1 {
		background: url("") repeat-x;
		background-size: 800px;
		animation: wave-animation-1 3.5s infinite linear;
	}
	
	.water-2 {
		top: 20px;
		background: url("") repeat-x;
		background-size: 800px;
		animation: wave-animation-2 6s infinite linear;
	}
	
	.water-3 {
		background: url("") repeat-x;
		background-size: 800px;
		top: -20px;
		animation: wave-animation-1 6s infinite linear;
	}
	
	.water-1,
	.water-2,
	.water-3 {
		position: absolute;
		width: 100%;
		height: 80px;
		bottom: 0;
	}
	
	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top
		}
	
		100% {
			background-position: 800px top
		}
	}
	
	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top
		}
	
		100% {
			background-position: 800px top
		}
	}
</style>
